<template>
  <div class="user-container" >
    <div class="bg-img">
      <div class="top-column">
        <img class="user-avatar" src="../../../static/images/userAvatar.png" alt="">
        <!-- <img class="user-avatar" :src="userInfo.avatarUrl" alt=""> -->
        <div class="user-name">黄焖鸡米饭</div>
        <i class="iconfont icon-set" @click="toSetting">&#xe637;</i>
      </div>
    </div>
    <div class="menu-list">
      <div class="menu">
        <div class="menu-name">手机号码</div>
        <div class="menu-info">
          156****1541
          <i class="iconfont icon-more">&#xe620;</i>
        </div>
      </div>
      <div class="menu">
        <div class="menu-name">单位地址</div>
        <div class="menu-info">
          市中区XX大路XX大厦
          <i class="iconfont icon-more">&#xe620;</i>
        </div>
      </div>
      <div class="menu-blank"></div>
      <div class="menu">
        <div class="menu-name">交易订单查询</div>
      </div>

      <div class="time-choose">
        <picker mode="date" :value="startDate" fields="day" start="2010-12-12" end="2021-12-12" @change="bindDateChange" class="time-picker">
          <div class="picker-name">
            <!-- 开始日期： -->
            {{ startDate }}
            <i class="iconfont icon-triangle">&#xe64f;</i>
          </div>
        </picker>
        <div class="time-to1">
          <span class="time-line">————</span>
          <span class="time-to">至</span>
          <span class="time-line">————</span>
        </div>
        <picker mode="date" :value="endDate" fields="day" start="2010-12-12" end="2021-12-12" @change="bindDateChange1"
         class="time-picker" style="text-align: right">
          <div class="picker-name">
            <!-- 结束日期： -->
            {{ endDate }}
            <i class="iconfont icon-triangle">&#xe64f;</i>
          </div>
        </picker>
      </div>
    </div>
    <div class="search-btn">查询</div>
  </div>
</template>

<script>
import card from '@/components/card'

export default {
  data () {
    return {
      count: 0,
      startDate: '2010-05-12',
      endDate: '2018-07-12',
      userInfo: ''
    }
  },

  components: {
    card
  },

  methods: {
    toSetting () {
      wx.navigateTo({
        url: '../setting/main'
      })
    },
    bindDateChange (e) {
      this.startDate = e.mp.detail.value
      // 调接口
    },
    bindDateChange1 (e) {
      this.endDate = e.mp.detail.value
      // 调接口
    }
  },

  created () {
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo()
  },
  onShow () {
    this.userInfo = wx.getStorageSync('userInfo')
    console.log(this.userInfo, 'this.userInfo用户头像')
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo()
  },
  mounted () {
    this.count = this.$store.state.count
  },
  onReachBottom () {
    console.log('222')
  }
}
</script>

<style scoped>
page {
  background: #f9f9f9;
}

.user-container {
  background: #f9f9f9;
}

.icon-set {
  font-size: 40rpx;
  color: #fff;
}

.icon-more {
  font-size: 28rpx;
  color: #999;
}
.bg-img {
  background: url('http://img2.imgtn.bdimg.com/it/u=4125365204,942052708&fm=27&gp=0.jpg') no-repeat;
  width: 100%;
  height: 233rpx;
  /* -webkit-filter: blur(5px); */
}
.top-column {
  padding: 50rpx 30rpx;
  color: #fff;
  /* background: #22ac38; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  position: relative;
  /* opacity:0.65;
  filter:alpha(opacity=65); */
}

.user-avatar {
  width: 125rpx;
  height: 125rpx;
  border-radius: 50%;
}

.user-name {
  width: 480rpx;
}
.menu-list {
  width: 100%;
}
.menu {
  padding: 30rpx;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
}

.menu + .menu {
  border-top: 2rpx solid #f9f9f9;
}
.menu-name {
  color: #333;
}

.menu-info {
  display: inline-flex;
  align-items: center;
  color: #999;
}

.menu-blank {
  height: 24rpx;
  width: 750rpx;
  background-color: #f9f9f9;
}


.time-choose {
  padding: 30rpx;
  background-color: #fff;
  font-size: 28rpx;
  /* line-height: 50rpx;
  height: 50rpx; */
  display: flex;
  justify-content: space-around;
  border-top: 2rpx solid #f9f9f9;
}

.time-picker {
  width: 200rpx;
  line-height: 50rpx;
  height: 50rpx;
}

.picker-name {
  display: inline-flex;
  justify-content: center;
}

.time-to1 {
  margin-top: 4rpx;
}

.time-select {
  width: 100%;
  text-align: center;
}

.time-line {
  color: #22ac38;
}

.time-to {
  color: #22ac38;
  border: 1px solid #22ac38;
  border-radius: 50%;
  padding: 6rpx 14rpx 6rpx 11rpx;
  font-size: 36rpx;
  text-align: center;
}

.icon-triangle {
  color: #22ac38;
  font-size: 18rpx;
  margin: 4rpx 0 0 6rpx;
}

.check-btn {
  /* width: 150rpx; */
  color: #fff;
  font-size: 26rpx;
  text-align: right;
}

.search-btn {
  margin: 30rpx;
  padding: 30rpx;
  border-radius: 8rpx;
  color: #fff;
  background-color: #22ac38;
  text-align: center;
  font-size: 28rpx;
}
</style>
